<template>
	<div class="hotList">
		<div class="all" v-for="(items, index) in optimizationHotList" :key="index">
			<div class="hotListTitle">
				<div class="left">
					<span></span>
					<h3>{{items.title}}</h3>
				</div>
				<router-link :to="{ path: '/more', query: { listId: items.id}}">
					<p>更多 > </p>
				</router-link>
			</div>
			<a href="javascript:void(0);" class="banner">
				<img class="banner" :src="items.titleImg">
			</a>
			<swiper :options="swiperList">
				<swiper-slide v-for="(slide, ind) in items.swiperList" :key="ind">
					<div class="list">
						<div class="listImg">
							<a href="javascript:void(0);" @click="divClick(slide.id)">
								<img
									:src="slide.imgUrl"
									alt
								>
							</a>
							<h3>{{slide.title}}</h3>
							<p class="details">农家种植，生长周期长</p>
							<div class="listBottom">
								<div class="lb_left">
									<p>500ml*2</p>
									<span>￥{{slide.price}}</span>
								</div>
								<i class="iconfont icon-huoche"></i>
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'HotList',
  props: ['optimizationHotList'],
  data () {
    return {
      swiperList: {
        slidesPerView: 2.5,
        spaceBetween: 10,
        loop: false,
        autoplay: false,
        freeMode: true
      }
    }
  },
  methods: {
    divClick: function (e) {
      // console.log(e);
      this.$router.push({ name: 'detail', params: { id: e } })
    }
  },
  updated () {
    // console.log(this.optimizationHotList)
  }
}
</script>

<style scope>
.hotList{
	margin-top: .2rem;
	background-color: #fff;
	padding: 0 .32rem;
}
.hotList .hotListTitle{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: .2rem;
	justify-content: space-between;
}
.hotList .hotListTitle .left{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.hotList .hotListTitle .left span{
	background-color: #83ce3c;
	width: 0.1rem;
	height: 0.52rem;
	display: block;
}
.hotList .hotListTitle .left h3{
	font-size: .32rem;
	padding-left: .2rem;
}
.hotList .hotListTitle p{
	font-size: .24rem;
}
.hotList .banner{
	width: 100%;
	margin-top: .3rem;
}
.hotList .banner img{
	width: 100%;
	display: block;
}

.list{
	padding: 0;
}
.list .listImg{
	width: 2.4rem;
	display: flex;
	flex-direction: column;
	margin-top: 0.2rem;
}
.list .listImg a{
	display: block;
}
.list .listImg a img{
	width: 2.4rem;
	height: 2.4rem;
	display: block;
}
.list .listImg h3{
	font-size: 0.24rem;
	margin-top: 0.12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 90%;
}
.list .listImg .details{
	font-size: 0.24rem;
	color: #909090;
	margin: 0.12rem 0;
}
.list .listImg .listBottom{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.list .listImg .listBottom .lb_left p{
	font-size: 0.24rem;
	color: #909090;
}
.list .listImg .listBottom .lb_left span{
	font-size: 0.28rem;
	display: block;
	color: #ff712b;
	height: 0.5rem;
	line-height: 0.5rem;
}
.list .listImg .listBottom i{
	color: #ff712b;
	font-size: 0.4rem
}
</style>
